<template>
  <Dialog :appDialog="appDialog">
    <div class="wrapper">
      <el-form>
        <el-form-item class="item_margin">
          <div class="title">预览链接用于查看文章效果，需关注公众号后才可接收，链接会在短期内失效</div>
          <el-select v-model="previewWxUserId" style="width: 100%" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="可输入多个微信号回车分隔">
            <el-option v-for="item in previewWxUserId" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
  import Dialog from '@/components/Dialog.vue'
  import { officialSync } from '@/api/content/channelFootage/officialaccountgraphics'
  import { getOfficeAccountList } from '@/api/channelconfig/officeAccount'

  import { reactive, ref, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  const emit = defineEmits(['submit'])
  const previewWxUserId = ref([])
  // 取消
  const onCancel = () => {
    appDialog.visible = false
    previewWxUserId.value = []
  }
  // 确定
  const onSubmit = async () => {
    if (previewWxUserId.value.length === 0) {
      ElMessage.error('请输入预览的帐号')
      return
    }
    emit('submit', previewWxUserId.value)
    appDialog.visible = false
  }
  const appDialog = reactive({
    visible: true,
    title: '发送预览',
    width: '700px',
    cancel: onCancel,
    submit: onSubmit,
    cancelText: '取消',
    submitText: '确定'
  })
  defineExpose({
    appDialog
  })
</script>

<style scoped lang="scss">
  .wrapper {
    padding: 45px 80px 0;
    min-height: 355px;
  }
  .title {
    text-align: center;
  }
</style>
